<!-- 年龄确认弹框 非会员 -->
<template>
	<modal :visible="visible" position="center">
		<view class="age-confirm-modal">
			<!-- <image :src="imgSrc" class="top-img" mode="widthFix" /> -->
			<image @click="onCancel"
				src="https://100000063-1252208446.file.myqcloud.com/images/macallan-remvp/member_close.png"
				class="top-close" mode="widthFix" />
			<image class="img-icon"
				src="https://100000063-1252208446.file.myqcloud.com/images/macallan-remvp/member_icon.png" alt="">
				<view class="content">
					<view class="content-info">THE MACALLAN麦卡伦线上精品店小程序使用 SDK
						工具和官方插件收集您的浏览行为数据进行分析，用以优化用户体验，为您提供更好的服务。如果你想了解这些 SDK 工具和第三方插件的具体细节，
						<text @click.stop="onLinkSDKClick" data-identifier="privacy" data-title="SDK和第三方插件清单">请查阅我们的SDK和第三方插件清单。</text>
					</view>
					<view class="checkbox-wrap">
						<view class="checkbox-item" @click.stop="onChangeAgeCheck" v-if="!ageModalChecked">
							<m-checkbox :value="ageCheck" :size="32" :custom-style="{ marginTop: marginTop }" />
							<view class="checkbox-text">内容涉及酒类知识及其他相关信息，请确认您已满18周岁</view>
						</view>
						<view class="checkbox-item" @click.stop="onChangeClauseCheck" v-if="showClause">
							<m-checkbox :value="clauseCheck" :size="32" :custom-style="{ marginTop: marginTop }" />
							<view class="checkbox-text">我已阅读并同意《<text class="font-black"
									@click.stop="onLinkClick">爱丁顿个人信息保护政策</text>》
								<!-- <text>》及《</text><text class="underline"
									@click.stop="handleOpenPrivacyContract">THE MACALLAN EBOUTIQUE
									麦卡伦小程序用户隐私保护指引</text> -->
							</view>
						</view>
					</view>
					<view class="btn-wrap">
						<!-- <view @click="onCancel" class="common-btn subsidiary btn">关闭</view> -->
						<button v-if="clauseCheck && checkedAll && !lowVersionWX" id="agree-btn"
							class="common-btn long-btn btn checkedAll-btn" open-type="agreePrivacyAuthorization"
							@agreeprivacyauthorization="handleAgreePrivacyAuthorization">确认</button>
						<button v-else @click.stop="onConfirm"
							class="common-btn long-btn btn uncheckedAll-btn">确认</button>
					</view>
				</view>
		</view>
	</modal>
</template>

<script>
	import tip from "@/utils/tip";
	import modal from "../modal/modal.vue";
	import mCheckbox from "../m-checkbox/m-checkbox.vue";
	import {
		estImg
	} from "./static";
	import {
		updatePolicyStatus,
		navigateToProtectionPolicy
	} from "./utils";
	import RegisterTracker from "./RegisterTracker";
	import {
		SYSTEM_INFO
	} from '@/utils/constant';
	import {
		mapState
	} from 'vuex';
	export default {
		components: {
			modal,
			mCheckbox
		},
		props: {
			// 使用页面
			location: {
				type: String,
				default: "home",
			},
			// 有的话, 就判定为ts活动
			tsActId: {
				type: String,
				default: "",
			}
		},
		data() {
			return {
				visible: false,
				imgSrc: estImg,
				ageCheck: false, // 勾选年龄
				clauseCheck: false, // 勾选保护政策
				ysCheck: false, // 勾选微信隐私
				showClause: false, // 显示爱丁堡政策协议
				modalShowArr: [], // 三个协议的显示状态
				checkedRules: [false, false], // 协议的勾选状态
				marginTop: '10rpx',
				lowVersionWX: false
			};
		},
		computed: {
			...mapState({
				ageModalChecked: (state) => state.ageModalChecked
			}),
			checkedAll() {
				let flag = true
				this.modalShowArr.map((item, index) => {
					if (item) {
						this.checkedRules.map((itey, indey) => {
							if (index == indey && item !== itey) {
								flag = false
							}
						})
					}
				})
				return flag
			}
		},
		mounted() {
			this.lowVersionWX = !wx.getPrivacySetting
		},
		methods: {
			open(showClause, showPrivate) {
				this.visible = true;
				if (!showPrivate && !showClause) {
					this.showClause = false
				} else {
					this.showClause = true
				}
				this.modalShowArr = [!this.ageModalChecked, this.showClause]
				this.$commonSensors.popupEvent('PopupExposure', {
					'popup_type': '用户授权',
					'popup_name': '18岁弹窗'
				})
			},
			close() {
				this.visible = false;
			},
			onChangeAgeCheck() {
				this.ageCheck = !this.ageCheck;
				this.$set(this.checkedRules, 0, this.ageCheck)
			},
			onChangeClauseCheck() {
				this.clauseCheck = !this.clauseCheck;
				this.$set(this.checkedRules, 1, this.clauseCheck)
			},

			// onLinkClick() {
			// 	navigateToProtectionPolicy();
			// },
			onCancel() {
				let trackParams = {
					c_age_answer: '拒绝'
				}
				RegisterTracker.authGate({
					trackParams,
					location: this.location,
					registerType: this.tsActId ? "TARGET_SALES" : "NORMAL",
				});
				this.$commonSensors.popupEvent('PopupClick', {
					'popup_type': '用户授权',
					'popup_name': '18岁弹窗',
					'button_name': '关闭'
				})
				wx.exitMiniProgram({
					complete: (com) => {

					},
				});
			},
			async onConfirm() {
				const {
					ageCheck,
					clauseCheck,
					location,
					tsActId
				} = this;


				// 显示几个协议
				let trueIndexArr = [];
				this.modalShowArr.map((item, index) => {
					if (item) {
						trueIndexArr.push(index)
					}
				})
				// let trackParams = {}
				// trueIndexArr.map((item) => {
				//   if (item == 0) {
				//     trackParams.c_age_answer = ageCheck ? '允许' : ''
				//   } else if (item == 1) {
				//     trackParams.c_pii_ppg_answer = clauseCheck ? '允许' : ''
				//   }
				// })
				// RegisterTracker.authGate({
				//   trackParams,
				//   location,
				//   registerType: tsActId ? "TARGET_SALES" : "NORMAL",
				// });
				let noticeArr = []
				this.modalShowArr.map((item, index) => {
					if (item) {
						this.checkedRules.map((itey, indey) => {
							if (index == indey && item !== itey) {
								noticeArr.push(indey)
							}
						})
					}
				})
				if (trueIndexArr.length == 1) {
					if (noticeArr.length == 1) {
						this.plainTextMessge(noticeArr[0])
					}
				} else if (trueIndexArr.length == 2) {
					if (noticeArr.length == 2) {
						this.plainTextMessge(99)
					} else if (noticeArr.length >= 1) {
						this.plainTextMessge(noticeArr[0])
					}
				}
				if (noticeArr.length < 1) {
					this.commit()
				}
				this.$commonSensors.popupEvent('PopupClick', {
					'popup_type': '用户授权',
					'popup_name': '18岁弹窗',
					'button_name': '提交'
				})
			},
			commit() {
				updatePolicyStatus();
				this.close();
				this.$emit("confirm");

			},
			plainTextMessge(number) {
				let msg;
				if (number == 0) {
					msg = "请确认您已年满18周岁"
				} else if (number == 1) {
					msg = "请确认您阅读并同意个人信息保护政策及隐私保护指引"
				} else if (number == 99) {
					msg = "请确认您已确认全部选项"
				}
				tip.plainText(msg)
			},

			handleAgreePrivacyAuthorization() {
				const {
					location,
					tsActId
				} = this;
				// 显示几个协议
				let trueIndexArr = [];
				this.modalShowArr.map((item, index) => {
					if (item) {
						trueIndexArr.push(index)
					}
				})
				let trackParams = {}
				trueIndexArr.map((item) => {
					if (item == 0) {
						trackParams.c_age_answer = '允许'
					} else if (item == 1) {
						trackParams.c_pii_ppg_answer = '允许'
					}
				})
				RegisterTracker.authGate({
					trackParams,
					location,
					registerType: tsActId ? "TARGET_SALES" : "NORMAL",
				});
				this.commit()
				this.$commonSensors.popupEvent('PopupClick', {
					'popup_type': '用户授权',
					'popup_name': '18岁弹窗',
					'button_name': '提交'
				})
			},
			//个人信息保护政策
			onLinkClick(e) {
				uni.navigateTo({
					url: "/pages/utcms/utcms?uttype=protectionPolicy",
				});
			},
      onLinkSDKClick(e) {
      	uni.navigateTo({
      		url: "/pages/cms/page?identifier=cms/sdkList&type=sdk",
      	});
      },
			// 打开隐私协议页面
			handleOpenPrivacyContract() {
				wx.openPrivacyContract({
					success: () => {}, // 打开成功
					fail: (err) => {}, // 打开失败
				})
			},
		}
	};
</script>

<style lang="scss">
	@import "./common.scss";

	.age-confirm-modal {
		width: 654rpx;
		height: 900rpx;
		background: #fff;
		position: relative;

		.top-img {
			display: block;
			width: 100%;
		}

		.top-close {
			position: absolute;
			right: 24rpx;
			top: 24rpx;
			width: 64rpx;
			height: 64rpx;
		}

		.img-icon {
			padding-top: 128rpx;
			padding-left: 236.12rpx;
			width: 182rpx;
			height: 57rpx;
		}

		.content {
			padding-top: 80rpx;
			padding-bottom: 56rpx;
			padding: 80rpx 64rpx 56rpx 64rpx;
			color: #757575 !important;
			display: flex;
			flex-direction: column;
			align-items: center;
		}

		.content-info {
			// width: 526rpx;
			color: #757575;
			line-height: 40rpx;
			font-family: 'NotoSansSC-Regular'

		}

		.checkbox-wrap {
			margin-top: 16rpx;
			// padding: 0 40rpx;
		}

		.checkbox-item {
			display: flex;
			margin-top: 16rpx;

			.checkbox-text {
				margin-left: 16rpx;
				width: 470rpx;
				font-size: 24rpx;
				line-height: 40rpx;
				color: #757575;
				font-family: 'NotoSansSC-Regular'
			}
		}

		.btn-wrap {
			display: flex;
			box-sizing: border-box;
			// padding: 0 50rpx;
			// justify-content: space-between;
			margin-top: 32rpx;
		}

		.uncheckedAll-btn {
			background-color: #C6C6C6;
			color: #757575;
			border: 0 !important;
		}

		.checkedAll-btn {
			background-color: #000;
			border: 0 !important;
		}

		.font-black {
			color: #1A1A1A
		}
	}
</style>
